import { Input, NavBar, TextArea } from 'antd-mobile'
import { useEffect, useState } from 'react'
import type { InputPopup } from '../index'
import styles from './index.module.scss'
type Props = {
  data: InputPopup
  close: () => void
  onUpdateName: (value: string, type: string, close: () => void) => void
}
/**
 * 问题：先点击昵称，弹出层中展示昵称内容【正常】，关闭弹出层后，再点击简介，此时，弹出层中展示的仍然是昵称内容【Bug】
 * 原因：默认情况下，antd-mobile 中的 Popup 组件在隐藏时，不会销毁所渲染的内容，而是隐藏：：useState 的默认值，只会在组件第一次渲染时生效
 * 解决办法：
 *  1. useEffect 去监听数据变化
 *  2.为 Popup 组件添加 destroyOnClose 属性表示在关闭弹出层时，销毁组件内容
 *  3.利用特殊的 key 属性：React 内部 diff 时，首先判断 key 是否相同，key 不同直接重新渲染该组件
 */
const EditInput = ({ close, data, onUpdateName }: Props) => {
  const [valName, setValName] = useState(data.value)
  // 区分简介和昵称的修改
  const isName = data.type === 'name' ? true : false
  useEffect(() => {
    setValName(data.value)
  }, [data.value])
  return (
    <div className={styles.root}>
      <NavBar
        className="navbar"
        right={
          <span
            className="commit-btn"
            onClick={() => onUpdateName(valName, data.type, close)}>
            提交
          </span>
        }
        onBack={close}>
        {'编辑' + isName ? '昵称' : '简介'}
      </NavBar>

      <div className="edit-input-content">
        <h3>{isName ? '昵称' : '简介'}</h3>

        {isName ? (
          <div className="input-wrap">
            <Input
              placeholder={'请输入昵称...'}
              value={valName}
              /**
               *  const arr = [1,2,3]
               *  arr.forEach(console.log)  =》 1,0,[1,2,3]
               * 等价于下面的
               *  arr.forEach((item,index,arr)=>{
               *     console.log(item,index,arr)
               *  })
               */
              onChange={setValName}
            />
          </div>
        ) : (
          <TextArea
            className="textarea"
            placeholder="请输入简介..."
            // 展示：右下角的字数统计
            showCount
            // 指定内容最大长度
            maxLength={100}
            // 指定 文本域 展示内容的行数（文本域高度）
            rows={4}
            value={valName}
            onChange={setValName}
          />
        )}
      </div>
    </div>
  )
}

export default EditInput
